﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body style="background: #efefef" data-spy="scroll" data-target="#mainNav">
<header>
            <nav class="navbar navbar-default" role="navigation"id="mainNav">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">summer个人博客</a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav pull-right">
                            <li class=""><a href="#">首页</a></li>
                            <li ><a href="#">关于我</a></li>
                            <li><a href="#">博客日记</a></li>
                            <li class="dropdown u" >
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                   慢生活
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" >
                                    <li><a href="#"style="border-bottom: none;">美文欣赏</a></li>
                                    <li><a href="#"style="border-bottom: none">生活的美好</a></li>
                                </ul>
                            </li>
                            <li ><a href="#">时间轴</a></li>

                        </ul>
                    </div>
                </div>
            </nav>
</header>

<script>
    $('.dropdown').hover(
        function(){
            $(this).children('.dropdown-menu').toggle();
        } )

</script>
<script>
$('#mainNav').affix({
    offset:{
        top:'50'
    }
})
</script>


<!--轮播图-->
<section id="one">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="images/轮播1.jpg" alt="First slide">
                        </div>
                        <div class="item">
                            <img src="images/轮播2.jpg" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="images/轮播3.jpg" alt="Third slide">
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <div class="col-md-4">
            <div class="big1" style="position: relative;">
                <div class="big">
                    <div><img src="images/轮播1.jpg" alt="" class="img-responsive"></div>
                    <ul class="list-unstyled ">
                        <li>做一个安静的设计女子</li>
                    </ul>
                </div>
            </div>
             <div class="big2" style="position: relative;padding-top: 18px">
                <div class="big">
                    <div><img src="images/轮播2.jpg" alt="" class="img-responsive"></div>
                    <ul class="list-unstyled ">
                        <li>做一个安静的设计女子</li>
                    </ul>
                </div>
</div>
        </div>
            </div>
        </div>

</section>

<!--two-->
<section class="two" style="margin-top: 20px">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-xs-12">

                <div class="col-md-6 col-sm-6 col-xs-12" style="border: solid 1px lightgray;padding: 10px 0 10px 0;background: white">
                    <div class="col-md-4  col-xs-4">
                        <img src="images/轮播1.jpg" alt="" class="img-responsive">
                    </div>
                    <div class="col-md-8 col-xs-8">
                        summer个人博客 哟呦呦切克闹
                    </div>
                </div>



            <div class="col-md-6  col-sm-6 col-xs-12" style="border: solid 1px lightgray;padding: 10px 0 10px 0;background: white">
                <div class="col-md-4 col-xs-4">
                    <img src="images/轮播1.jpg" alt="" class="img-responsive">
                </div>
                <div class="col-md-8 col-xs-8">
                    summer个人博客 哟呦呦切克闹
                </div>
            </div>

            <div class="col-md-6 col-sm-6  col-xs-12" style="border: solid 1px lightgray;padding: 10px 0 10px 0;background: white;margin-top: 15px">
                <div class="col-md-4 col-xs-4">
                    <img src="images/轮播1.jpg" alt="" class="img-responsive">
                </div>
                <div class="col-md-8 col-xs-8">
                    summer个人博客 哟呦呦切克闹
                </div>
            </div>

            <div class="col-md-6 col-sm-6  col-xs-12" style="border: solid 1px lightgray;padding: 10px 0 10px 0;background: white;margin-top: 15px">
                <div class="col-md-4 col-xs-4">
                    <img src="images/轮播1.jpg" alt="" class="img-responsive">
                </div>
                <div class="col-md-8 col-xs-8">
                    summer个人博客 哟呦呦切克闹
                </div>
            </div>

            <div class="col-md-6 col-sm-6 col-xs-12" style="border: solid 1px lightgray;padding: 10px 0 10px 0;background: white;margin-top: 15px">
                <div class="col-md-4 col-xs-4">
                    <img src="images/轮播1.jpg" alt="" class="img-responsive">
                </div>
                <div class="col-md-8 col-xs-8">
                    summer个人博客 哟呦呦切克闹
                </div>
            </div>

                <div class="col-md-6 col-sm-6 col-xs-12" style="border: solid 1px lightgray;padding: 10px 0 10px 0;background: white;margin-top: 15px">
                    <div class="col-md-4 col-xs-4">
                        <img src="images/轮播1.jpg" alt="" class="img-responsive">
                    </div>
                    <div class="col-md-8 col-xs-8">
                        summer个人博客 哟呦呦切克闹
                    </div>
                </div>
        </div>
            
            <div class="col-md-4 col-xs-12 introduce">
                <div style="background: white;font-size: 16px;color: #333333;font-weight: 600;padding: 10px">博主简介</div>
                <div style="margin-top: 20px">
                   <div style="width: 40%;height: 40%;display: inline-block;float: left;margin-right: 5px"><img src="images/轮播1.jpg" alt="" class="img-responsive"></div>
                   <div style="vertical-align:top;line-height: 22px;font-size: 15px;color: #333333;letter-spacing: 1px;"><p style="text-indent: 1.5em">summer，刚刚毕业的小菜鸟，对未来充满好奇。代码虐我千百遍，我待代码如初恋,
                        刚刚毕业的小菜鸟，对未来充满好奇。代码虐我千百遍，我待代码如初恋, 刚刚毕业的小菜鸟，对未来充满好奇。代码虐我千百遍，我待代码如初恋</p></div>
                </div>
            </div>
        </div>
        </div>
</section>

<!--three-->
<section id="three" style="margin-top: 20px">
    <div class="container">
        <div class="row">
           <div class="col-md-8">
               <div class="pics">
           <ul>
               <li class="list-unstyled">
                   <i>
                   <a href=""><img src="images/one.jpg" alt=""></a>
                   </i>
                   <span>做一个安静的设计女子</span>

               </li>

               <li class="list-unstyled li1"  style="margin-left:11px">
                   <i>
                   <a href=""><img src="images/two.jpg" alt=""></a>
                   </i>
                   <span>做一个安静的设计女子</span>

               </li>

               <li class="list-unstyled li1" style="margin-left: 12px">
                   <i>
                   <a href="" ><img src="images/three.jpg" alt=""></a>
                   </i>
                   <span>做一个安静的设计女子</span>
               </li>

           </ul>

               </div>
           </div>


            <div class="col-md-4 select-img">
            <div style="background: white;font-size: 16px;color: #333333;font-weight: 600;padding: 10px 10px 1px 10px"><p>图片精选</p></div>
                <div style="margin-top: 20px">
                <div class="col-md-4 col-xs-4">
                    <img src="images/轮播1.jpg" alt="" class="img-responsive" >
                </div>
                    <div class="col-md-4  col-xs-4">
                        <img src="images/轮播1.jpg" alt=""class="img-responsive">
                    </div>
                    <div class="col-md-4  col-xs-4">
                        <img src="images/轮播1.jpg" alt=""class="img-responsive">
                    </div>
                    <div class="col-md-4 col-xs-4"style="margin-top: 10px">
                        <img src="images/轮播1.jpg" alt=""class="img-responsive">
                    </div>
                    <div class="col-md-4 col-xs-4"style="margin-top: 10px">
                        <img src="images/轮播1.jpg" alt=""class="img-responsive">
                    </div>
                    <div class="col-md-4 col-xs-4"style="margin-top: 10px">
                        <img src="images/轮播1.jpg" alt=""class="img-responsive">
                    </div>
            </div>
            </div>

    </div>
    </div>
</section>

<!--four,这是一个tab标签-->

<section id="four" >
    <div class="container">
        <div class="row">

            <div class="col-md-8" >
                <ul id="myTab" class="nav nav-tabs" style="background: white">
            <li class="active">
                <a href="#new-article" data-toggle="tab">最新文章</a>
            </li>
            <li>
                <a href="#notes" data-toggle="tab">心得笔记</a>
            </li>
            <li>
                <a href="#website" data-toggle="tab">网站建设 </a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="new-article">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background: white;margin-top: 15px;padding: 10px 0 10px 0">
                    <div class="col-md-4 col-sm-4 col-xs-4"><img src="images/轮播1.jpg" alt=""class="img-responsive"></div>
                <div class="col-md-8 col-sm-8 col-xs-8">
                    <p>最新文章1</p>
                        <p style="vertical-align: bottom;">作者;summer &nbsp;&nbsp;阅读数：1</p>
                </div>
                </div>

                <div class="col-md-12 col-sm-12 col-xs-12" style="background: white;margin-top: 15px;padding: 10px 0 10px 0">
                    <div class="col-md-4 col-sm-4 col-xs-4"><img src="images/轮播1.jpg" alt=""class="img-responsive"></div>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <p>最新文章1</p>
                        <p style="vertical-align: bottom;">作者;summer &nbsp;&nbsp;阅读数：1</p></div>
                </div>
            </div>

            <div class="tab-pane fade" id="notes">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background: white;margin-top: 15px;padding: 10px 0 10px 0">
                    <div class="col-md-4 col-sm-4 col-xs-4"><img src="images/轮播1.jpg" alt=""class="img-responsive"></div>
                    <div class="col-md-8  col-sm-8 col-xs-8">
                        <p>心得笔记1</p>
                        <p style="vertical-align: bottom;">作者;summer &nbsp;&nbsp;阅读数：1</p></div>
                    </div>



                <div class="col-md-12 col-sm-12 col-xs-12" style="background: white;margin-top: 15px;padding: 10px 0 10px 0">
                    <div class="col-md-4 col-sm-4 col-xs-4"><img src="images/轮播1.jpg" alt=""class="img-responsive"></div>
                    <div class="col-md-8  col-sm-8 col-xs-8">
                        <p>心得笔记2</p>
                        <p style="vertical-align: bottom;">作者;summer &nbsp;&nbsp;阅读数：1</p></div>
                    </div>

        </div>

            <div class="tab-pane fade" id="website">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background: white;margin-top: 15px;padding: 10px 0 10px 0">
                    <div class="col-md-4  col-sm-4 col-xs-4"><img src="images/轮播1.jpg" alt=""class="img-responsive"></div>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <p>网站建设1</p>
                        <p style="vertical-align: bottom;">作者;summer &nbsp;&nbsp;阅读数：1</p></div>
                    </div>


                <div class="col-md-12 col-sm-12 col-xs-12" style="background: white;margin-top: 15px;padding: 10px 0 10px 0">
                    <div class="col-md-4 col-sm-4 col-xs-4"><img src="images/轮播1.jpg" alt=""class="img-responsive"></div>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <p>网站建设1</p>
                        <p style="vertical-align: bottom;">作者;summer &nbsp;&nbsp;阅读数：1</p></div>
                    </div>
            </div>
            </div>
            </div>

            <div class="col-md-4 four-right" >
            <div class="whole">
                <div class="tab-header">
                    <ul class="list-unstyled">
                        <li class="selected"><a href="javascript:;">活动排行</a></li>
                        <li><a href="javascript:;">文章点击量</a></li>
                        <li><a href="javascript:;">啦啦啦啦</a></li>
                    </ul>
                </div>
                <div class="tab-middle" style="padding-left: 20px;">
                    <ul>
                        <li>
                            <a href="" style="display: block">
                                <ul>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                </ul>
                            </a>
                        </li>

                        <li >
                            <a href=""style="display: none">
                                <ul>
                                    <li>你zhen棒</li>
                                    <li>你zhen棒</li>
                                    <li>你zhen棒</li>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                </ul>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: none">
                                <ul>
                                    <li>你贼厉害</li>
                                    <li>你贼厉害</li>
                                    <li>你贼厉害</li>
                                    <li>你贼厉害</li>
                                    <li>你很棒</li>
                                    <li>你很棒</li>
                                </ul>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            </div>

            <div class="text-center col-md-8"><a href=""class="btn"style="background: #968f8f;margin-top: 20px;letter-spacing: 3px;border-radius: 40%;padding: 10px 20px 10px 20px;color: white"><span style="font-size: 16px">查看更多</span><b class="glyphicon glyphicon-arrow-right"style="font-size: 16px"></b></a></div>
                </div>
            </div>


</section>
<script>
    window.onload=function () {
        var allLis = document.querySelectorAll(".tab-header ul li");

        var allDom = document.querySelectorAll(".tab-middle ul li a");

        for (var i = 0; i < allLis.length; i++) {
            var li = allLis[i];
            li.index = i;
            li.onmouseover=function () {
                for (j=0;j<allLis.length;j++) {
                    allLis[j].className='';
                    allDom[j].style.display='none';

                }
                this.className="selected";
                allDom[this.index].style.display='block';
            }


        }

    }
</script>

<div style="background:green;width: 200px;height: 200px">

</div>
</body>
</html>